<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-style.css}" />
    <link rel="stylesheet" th:href="@{/css/matrix-media.css}" />
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
    <title>资源管理</title>
</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">权限管理系统</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-menu-->
<div th:include="common/top :: top"></div>
<div th:include="common/menu :: menu"></div>

<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> </div>
    </div>
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="span12">

                <div class="widget-box">
                    <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
                        <h5>资源列表</h5>
                    </div>
                    <form class="form-inline">
                        <button type="button" shiro:hasPermission="/resources/add" onclick="$('#resourcesModal').modal();" class="btn btn-info" style="float: right; margin-right: 1px;">新增</button>
                        <button type="button" shiro:hasPermission="/resources/delete" onclick="delById();" class="btn btn-info" style="float: right; margin-right: 1px;">删除</button>
                        </form>
                    <table class="table table-bordered data-table" id="datatable" >
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="checkall" />
                            </th>
                            <th>编号</th>
                            <th>资源名称</th>
                            <th>父资源</th>
                            <th>资源链接</th>
                            <th>资源类型</th>
                            <th>排序</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!--弹框-->
<div class="modal fade bs-example-modal-sm"  id="selectResources" tabindex="-1" role="dialog" aria-labelledby="selectRoleLabel">
    <div class="modal-dialog modal-sm" role="document" style="height: 600px; "  >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="selectRoleLabel">分配权限</h4>
            </div>
            <div class="modal-body">
                <form id="boxRoleForm" >
                    <ul id="treeDemo" class="ztree"></ul>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="saveRoleResources();" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--弹框-->


<!--添加弹框-->
<div class="modal fade" id="resourcesModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">添加资源</h4>
            </div>
            <div class="modal-body">
                <form id="resourcesForm">
                    <div class="form-group">
                        <label  class="control-label">资源名称:</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="请输入资源名称"/>
                    </div>
                    <div class="form-group">
                        <label  class="control-label">父资源ID:</label>
                        <input type="text" class="form-control" id="parentId" name="parentid"  placeholder="请输入父资源ID">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">资源链接:</label>
                        <input type="text" class="form-control" id="resUrl" name="resurl"  placeholder="请输入资源链接">
                    </div>
                    <div class="form-group">
                        <label  class="control-label">资源类型:</label>
                        <select class="form-control" name="type" id="type" >
                            <option value="1">菜单</option>
                            <option value="2">按钮</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">排序:</label>
                        <input type="text" class="form-control" id="sort" name="sort"  placeholder="请输入排序">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="addResources();" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/添加弹框-->



<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12"> 2021 @kh<a href="http://www.baidu.com">RBAC</a> </div>
</div>
<!--end-Footer-part-->
<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}" th:sr></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/layer.js}"></script>
<script type="text/javascript">
    var table;
    $(".checkall").click(function () {
        var check = $(this).prop("checked");
        $(".checkchild").prop("checked", check);
    });
    $(document).ready(function() {
        table = $('#datatable').DataTable( {
            "dom": '<"top"i>rt<"bottom"flp><"clear">',
            "searching" : false,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "serverSide": true,//开启服务器模式，使用服务器端处理配置datatable
            "processing": true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

            "ajax": 'resources',
            "columns": [
                {
                    "sClass": "text-center",
                    "data": "id",
                    "render": function (data, type, full, meta) {
                        return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                    },
                    "bSortable": false
                },
                { "data": "id" },
                { "data": "name" },
                { "data": "parentid" },
                { "data": "resurl" },
                { "data": "type" },
                { "data": "sort" },
            ],
            columnDefs:[
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 },
                { "orderable": false, "targets": 3 },
                { "orderable": false, "targets": 4 },
                {
                    "orderable": false,
                    "render": function(data, type, row) {
                        if(data==1){
                            return "菜单";
                        }else if(data==2){
                            return "按钮";
                        }else{
                            return "其他";
                        }
                    },
                    "targets": 5
                },
                { "orderable": false, "targets": 6 }
            ],

        } );



    } );

    function search(){
        table.ajax.reload();
    }

    //添加资源
    function addResources() {
        var name = $("#name").val();
        var parentId = $("#parentId").val();
        var resUrl = $("#resUrl").val();
        var sort = $("#sort").val();

        if(name == "" || name == undefined || name == null){
            return layer.msg('资源名称不能为空', function(){
                //关闭后的操作
            });
        }
        if(parentId == "" || parentId == undefined || parentId == null){
            return layer.msg('父资源id不能为空', function(){
                //关闭后的操作
            });
        }
        if(resUrl == "" || resUrl == undefined || resUrl == null){
            return layer.msg('资源链接不能为空', function(){
                //关闭后的操作
            });
        }
        if(sort == "" || sort == undefined || sort == null){
            return layer.msg('资源排序不能为空', function(){
                //关闭后的操作
            });
        }

        $.ajax({
            cache: true,
            type: "POST",
            url:'resources/add',
            data:$('#resourcesForm').serialize(),// 你的formid
            async: false,
            success: function(data) {
                if(data=="success"){
                    layer.msg('保存成功');
                    table.ajax.reload();
                    $('#resourcesModal').modal('hide');
                }else{
                    layer.msg('保存失败');
                    $('#resourcesModal').modal('hide');
                }
            }
        });
    }

    function delById() {
        var ids = new Array(); //存储输入的数组
        $(".checkchild:checked").each(function ()
        {
            ids.push($(this).val())
        })
        var id = ids.toString()
        if ($(".checkchild:checked").length < 1)
        {
            layer.msg('请选择一条数据');
            return;
        }
        layer.confirm('您确定要删除该资源吗？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            $.ajax({
                cache: true,
                type: "POST",
                url:'resources/delete',
                data:{ids:id},
                async: false,
                success: function(data) {
                    if(data=="success"){
                        layer.msg('删除成功');
                        table.ajax.reload();
                    }else{
                        layer.msg('删除失败');
                    }
                }
            });
        });
    }
</script>
</body>
</html>